<template>
  <div class="content">
    <div class="substance" @click="getexam">
      <!-- <router-link :to="'/pxingExam'" @click.native.prevent="getexam"> -->
      <h1 class="examtitle">{{ list.templateName }}</h1>
      <h2>考试时长：{{ list.examDuration }}分钟</h2>
      <h2>试卷总分：{{ list.totalScore }}分</h2>
      <h2>及格分数：{{ list.qualifiedScore }}分</h2>
      <!-- </router-link> -->
      <ul class="message">
        <li>考试时间：{{ list.kaikaoTime }}</li>
        <li>交卷时间：{{ list.jiaojuanshijian }}</li>
        <li>试卷得分：{{ list.defen }}</li>
        <li>
          考试状态：{{
            list.studentState == "2"
              ? "通过"
              : '未通过'
          }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getExamTemp ,getUserCourseStatus} from "@/api/whpx/ksUser";
export default {
  data() {
    return {
      list: {},
      form: {
        ksSpecialty: null,
        userId: null
      },
      states: ""
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.form.userId = Cookies.get("id");
      this.form.ksSpecialty = Cookies.get("ksSpecialty");
      getExamTemp(this.form).then(response => {
        this.list = response.data;
        this.states = this.list.studentState;
        console.log(this.states);
        Cookies.set("session_time", response.data.examDuration);
        Cookies.set("session_total", response.data.totalScore);
        Cookies.set("session_templateName", response.data.templateName);
      });
    },
    getexam() {
      this.form.userId = Cookies.get("id");
      this.form.ksSpecialty = Cookies.get("ksSpecialty");
      getUserCourseStatus(this.form).then(res => {
        var userstatus = res.data.status;
        if (userstatus === "0") {
          this.msgError("课程未达标，请继续学习。");
        } else if (this.states === "2") {
          this.msgSuccess("考试已通过，无需继续考试！");
        } else {
          this.$router.push("/pxingExam");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
  background: #fff;
}
.substance {
  cursor: pointer;
  h1 {
    font-size: 16px;
    color: #000;
    font-weight: 550;
    letter-spacing: 1px;
    line-height: 30px;
  }
  h2 {
    font-size: 14px;
    color: #505050;
    line-height: 30px;
  }
}
.content:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.8);
}
.message {
  display: flex;
  height: 50px;
  background: #e5e5e5;
  margin: 10px 0;
  li {
    flex: 1;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    color: #505050;
  }
}
</style>
